<template>
  <div id="app">
    <!-- <keep-alive exclude="detail,cart" include="1"> -->
    <!-- <keep-alive> -->
    <router-view />
    <!-- </keep-alive> -->
    <aplayer
      v-if="Object.keys(getMusic).length"
      :music="getMusic"
      :list="getAudio"
      class="aplayer"
      listFolded
      listMaxHeight="200px"
      autoplay
      ref="audio"
      theme="black"
      :style="{
        bottom: getTabBarState ? '50px' : '0',
      }"
    ></aplayer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import aplayer from "vue-aplayer";
export default {
  data() {
    return {
      ifTabBar: false,
    };
  },
  components: {
    aplayer,
  },
  computed: {
    ...mapGetters(["getMusic", "getAudio", "getTabBarState"]),
  },
  created() {
    this.$bus.$on("playMusic", (song) => {
      this.$refs.audio.onSelectSong(song); //执行播放音乐事件
    });
  },
};
</script>

<style lang="less">
.aplayer {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 !important;
  z-index: 10;
}
</style>
